<template>
  <div>
    <!-- 顶部按钮部分 -->
    <div class="Top">
      <div v-if="TopBtu" class="top_btu">
        <el-button
          v-for="(item, index) in TopBtu"
          :key="index"
          :type="item.type"
          :icon="item.icon"
          size="small"
          @click="cast(item.incident)"
          >{{ item.label }}</el-button
        >
      </div>
      <!-- 搜索框部分 -->
      <div class="searchK" v-if="searchK">
        <el-form :model="searchform" ref="searchform" label-width="100px">
          <div class="searchinput">
            <el-form-item
              v-for="(item, index) in searchK"
              :key="index"
              :label="item.label"
              :prop="item.prop"
              label-width="150px"
            >
              <el-input
                v-if="item.type === 'number' || item.type === 'text'"
                :type="item.type"
                :placeholder="'请输入要搜索的' + item.label"
                v-model="searchform[item.prop]"
                clearable
                style="width: 220px"
              ></el-input>
              <el-select
                v-if="item.type === 'select'"
                :placeholder="'请输入' + item.label"
                v-model="searchform[item.prop]"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                size="small"
                icon="el-icon-search"
                item
                @click="submitForm(searchform)"
                >查询</el-button
              >
              <el-button
                icon="el-icon-refresh-right"
                type="info"
                size="small"
                @click="resetForm(searchform)"
                >重置</el-button
              >

              <el-button
                type="primary"
                class="el-icon-menu"
                @click="lieconfig"
                v-if="this.lieconfigshow == false"
                size="small"
                >列配置</el-button
              >
              <div
                style="display: inline-block; margin-left: 30px"
                v-show="this.lieconfigshow == true"
              >
                排序<el-switch
                  v-model="issortable"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="true"
                  :inactive-value="false"
                ></el-switch>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="查询"
                  placement="top"
                >
                  <i
                    class="el-icon-search"
                    @click="submitForm"
                    style="font-size: 25px; color: DodgerBlue"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="设置"
                  placement="top"
                >
                  <el-popover placement="top" width="300" v-model="visible">
                    <div>
                      <el-checkbox
                        :indeterminate="isIndeterminate"
                        v-model="checkAll"
                        :checked="true"
                        @change="handleCheckAllChange"
                        >列配置</el-checkbox
                      >
                      <el-button
                        type="text"
                        style="margin-left: 80px; color: red"
                        @click="reset"
                        >重置</el-button
                      >
                      <el-row v-for="(item, index) in tableProp">
                        <el-col :span="12">
                          <el-checkbox-group
                            v-model="selecttable"
                            @change="handleCheckedChange"
                          >
                            <el-checkbox
                              style="margin-top: 15px"
                              :label="item"
                              :key="index"
                              :checked="true"
                              >{{ item.name }}</el-checkbox
                            >
                          </el-checkbox-group>
                        </el-col>
                        <el-col :span="12">
                          <span>表格宽度 </span>
                          <el-input
                            v-model="item.width"
                            style="width: 60px; margin-top: 5px"
                          ></el-input>
                          <span>px</span>
                        </el-col>
                      </el-row>
                    </div>
                    <i
                      class="el-icon-setting"
                      slot="reference"
                      style="font-size: 25px; color: DodgerBlue"
                    ></i>
                  </el-popover>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="重置"
                  placement="top"
                >
                  <i
                    class="el-icon-refresh"
                    style="font-size: 25px; color: DodgerBlue"
                    @click="mainreset"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="普通查询"
                  placement="top"
                >
                  <i
                    class="el-icon-d-arrow-left"
                    @click="lieconfig"
                    style="font-size: 25px; color: DodgerBlue"
                  ></i>
                </el-tooltip>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 表格部分 -->
      <div class="tableT">
        <el-table
          :data="tableData"
          @select="danxuan"
          @select-all="quanxuan"
          :border="tableConfig.border"
          style="width: 100%"
          :default-sort="{ prop: 'id', order: 'descending' }"
        >
          <el-table-column
            v-if="tableConfig.selection"
            type="selection"
            width="55"
            align="center"
          >
          </el-table-column>
          <el-table-column
            fixed
            v-if="tableConfig.index"
            type="index"
            label="序号"
            align="center"
            width="50"
          >
          </el-table-column>
          <el-table-column
            v-for="(item, index) in selecttable"
            v-if="item.prop == 'avatar' || item.prop == 'preimg'"
            :key="index"
            :prop="item.prop"
            :label="item.name"
            :width="item.width"
            align="center"
          >
            <template slot-scope="scope">
              <img
                v-if="scope.row[item.prop]"
                :src="scope.row[item.prop]"
                min-width="70"
                height="70"
              />
              <el-tag v-else type="primary" disable-transitions>无图片</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in selecttable"
            v-if="item.prop !== 'avatar' && item.prop !== 'preimg'"
            :key="index"
            :prop="item.prop"
            :label="item.name"
            :width="item.width"
            :show-overflow-tooltip="true"
            :formatter="item.formatter || undefined"
            align="center"
            :sortable="issortable"
          >
          </el-table-column>
            <slot name="table"> </slot>
          <el-table-column
            v-if="tableConfig.handle"
            fixed="right"
            label="操作"
            align="center"
            :min-width="210"
          >
            <template slot-scope="scope">
              <el-button
                v-for="(item, index) in tableConfig.buttonAffairs"
                :key="index"
                @click="handleClick(item.affairs, scope.row)"
                :type="item.type"
                size="mini"
                >{{ item.name }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          v-if="tableConfig.pagin"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="[5, 10, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tabletotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableContainer",
  props: {
    TopBtu: Array,
    searchK: Array,
    tableProp: Array,
    tableData: Array, //显示的数据
    tabletotal: 0,
    //分页对象
    page: {
      page: Number,
      pageSize: Number,
    },
    tableConfig: {
      type: Object,
      default: function () {
        return {
          pagin: true, //是否分页
          selection: true, // 选择框
          index: true, // 序号
          border: true, // 边框
          handle: true, // 是否显示操作列
          handleWidth: "",
          buttonType: "", // buttonType='scope'：使用插槽 slot='table-column-handle' 其他使用buttonAffairs 且如果 button 显示按钮 其他类型显示文字按钮
          buttonAffairs: [
            {
              name: "编辑",
              icon: "el-icon-plus",
              type: "primary",
              affairs: "Edit",
            },
            {
              name: "删除",
              icon: "el-icon-delete",
              type: "danger",
              affairs: "Remove",
            },
          ],
        };
      },
    },
  },
  data() {
    return {
      lieconfigshow: false,
      issortable: true,
      visible: false,
      checkAll: false,
      isIndeterminate: false,
      selecttable: [],
      //表单对象
      searchform: {},
      //批量删除数组
      batchdel: [],
    };
  },
  methods: {
    //顶部按钮抛出事件
    cast(val) {
      if (val === "Remove") {
        this.$emit("simTop" + val, this.batchdel);
        return;
      }
      this.$emit("simTop" + val);
    },

    lieconfig() {
      this.lieconfigshow = !this.lieconfigshow;
    },
    handleCheckAllChange(val) {
      this.selecttable = val ? this.tableProp : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tableProp.length; //选中长度等于总长度时全选按钮为true
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.tableProp.length;
    },
    reset() {
      this.tableProp = this.$options.propsData.tableProp;
      this.selecttable = this.tableProp;
      this.isIndeterminate = false;
      this.checkAll = true;
    },
    mainreset() {
      this.searchform = {};
      this.$emit("reset");
    },
    //查询
    submitForm(searchform) {
      this.$emit("selCX", searchform);
    },
    resetForm(searchform) {
      this.searchform = {};
      this.$emit("reset");
    },
    handleClick(affairs, row) {
      this.$emit("sim" + affairs, row);
    },
    danxuan(selection) {
      this.batchdel = selection;
    },
    quanxuan(selection) {
      this.batchdel = selection;
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.$emit("getlist", this.page);
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.$emit("getlist", this.page);
    },
  },
};
</script>

<style scoped>
.searchinput {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.el-table thead {
  background-color: aqua;
}
.block {
  margin-top: 20px;
  text-align: right;
}
</style>